<template>
    <div class="welcome-container">
        <!-- 左侧背景区域 + 左下角文字 -->
        <div class="welcome-left">
            <el-image class="welcome-image" fit="cover" :src="bgImage"/>
            <div class="welcome-title">
                <div>欢迎使用小型工具箱</div>
                <div class="sub-title">登录可使用</div>
            </div>
        </div>

        <!-- 右侧卡片区域（登录 / 注册 / 重置） -->
        <div class="right-card">
            <div class="right-card-scroll">
                <router-view v-slot="{ Component }">
                    <transition name="el-fade-in-linear" mode="out-in">
                        <component :is="Component"/>
                    </transition>
                </router-view>
            </div>

            <!-- 底部备案号等信息 -->
            <footer class="footer">
                <div class="footer-content">
                    <span>© 2025 - 2026 小型工具箱</span>
                    <a
                            href="https://beian.miit.gov.cn"
                            target="_blank"
                            rel="noopener noreferrer"
                            title="工信部备案查询"
                    >
                        粤ICP备2025447867号
                    </a>
                    <a
                            href="https://github.com/shanyue0507/ToolKit.git"
                            target="_blank"
                            rel="noopener noreferrer"
                            title="前往 GitHub 仓库"
                    >
                        GitHub
                    </a>
                    <a
                            href="https://gitee.com/yunpoyuechu/tool-kit.git"
                            target="_blank"
                            rel="noopener noreferrer"
                            title="前往 Gitee 仓库">
                        Gitee
                    </a>
                </div>
            </footer>
        </div>
    </div>
</template>

<script setup>
import bgImage from '@/assets/background.png'
</script>

<style scoped>
/* 根容器，左右布局 */
.welcome-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    position: relative;
    background-color: var(--el-bg-color);
}

/* 左侧背景区域 */
.welcome-left {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* 背景图样式 */
.welcome-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* 左下角欢迎文字 */
.welcome-title {
    position: relative;
    padding: 1.875rem;
    color: chartreuse;
    text-shadow: 0 0 0.5625rem;
    font-size: 1.25rem;
    z-index: 2;
    user-select: none;
    pointer-events: none;
}

.sub-title {
    margin-top: 0.625rem;
    font-size: 1.875rem;
    font-weight: bold;
}

/* 右侧区域 */
.right-card {
    width: 25rem;
    height: 100vh;
    background-color: var(--el-bg-color);
    z-index: 3;
    display: flex;
    flex-direction: column;
}

/* 内容滚动区域 */
.right-card-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 2.5rem 1.25rem;
}

/* 底部区域 */
.footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--el-border-color);
    background-color: var(--el-bg-color);
    text-align: center;
    font-size: 0.875rem;
    color: var(--el-text-color-secondary);
    user-select: none;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}

.footer-content a {
    color: var(--el-text-color-secondary);
    text-decoration: none;
    transition: all 0.3s;
}

.footer-content a:hover {
    color: var(--el-color-primary);
    text-decoration: none;
}

.footer-content a[href*="beian.miit.gov.cn"] {
    color: #2882fe;
}

/* 滚动条样式 */
.right-card-scroll::-webkit-scrollbar {
    width: 0.5rem;
}

.right-card-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0.25rem;
}

/*  响应式：移动端隐藏背景图和欢迎文字，右侧宽度撑满 */
@media screen and (max-width: 48rem) {
    .welcome-left,
    .welcome-title {
        display: none;
    }

    .right-card {
        width: 100vw;
    }

    .welcome-container {
        justify-content: center;
    }
}
</style>